.page-home {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  position: relative;
  --bg-height: 1700rpx;
  .footer-text{
    position: absolute;
    left: 0;
    bottom: 0;
    height: 136rpx; ;
    width: 100%;
  }
  .one-mini-box{
    position: relative;

  }
  .one-mini{
    position: absolute;
    right: 4rpx;
    top: 8rpx;
    font-size: 12rpx;
    line-height: 1;
  }

  .city-container {
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 1;
  }

  .pos {
    position: absolute;
    left: 0;
  }

  .bg {
    width: 100%;
    height: var(--bg-height);
    pointer-events: none;
  }

  .bg-mask {
    background-color: rgba(0, 0, 0, 0.59);
    z-index: 2;
    height: 100%;
  }

  @keyframes active {
    to {
      opacity: 1;
    }
  }

  .city {
    opacity: 0;
    transition: opacity 0.1s;

    &.active {
      z-index: 30;
      opacity: 1;
    }
  }

  .mouse {
    width: 188rpx;
    height: 125rpx;
    z-index: 10;
  }
  .step-draw{
    .btn-rule{
      left: auto;
      width: 39rpx;
      height: 179rpx;
      right: 0;
      top:246rpx;
    }
  }

  .area {
    border: solid 1px red;
  }

  @keyframes frame_tip {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 0.5;
    }
  }

  .tip {
    width: 190rpx;
    height: 84rpx;
    left: 320rpx;
    top: 873rpx;
    z-index: 10;
    animation: frame_tip 500ms infinite alternate-reverse;
    pointer-events: none;
  }

  .debug {
    color: red;
    width: 100%;
    z-index: 111;
    left: 0;
    top: initial;
    bottom: 100rpx;
    text-align: center;
  }

  .btn {
    width: 335rpx;
    height: 78rpx;
    left: 205rpx;
    bottom: 120rpx;
    z-index: 1;

    &.active {
      z-index: 20;
    }
  }

  .rule-btn-show {
    position: absolute;
    right: 0;
    top: 260rpx;
    width: 39rpx;
    height: 153rpx;
  }

  .rule-btn-close {
    left: 175rpx;
    top: 947rpx;
    width: 403rpx;
    height: 111rpx;
  }

  .rule-box {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
  }

  .placeholder {
    position: absolute;
    background-color: #ff000000;

    &.btn-yuyue {
      left: 177rpx;
      top: 1018rpx;
      width: 400rpx;
      height: 114rpx;
    }
  }

  .step-get-userinfo {
    .form {
      position: absolute;
      left: 141rpx;
      top: 586rpx;
      --form-left: 100rpx;
      --form-height: 82rpx;
      --form-width: 344rpx;
      font-size: 28rpx;
    }

    .ipt-username {
      left: var(--form-left);
      top: 30rpx;
      width: var(--form-width);
      height: var(--form-height);
    }

    .ipt-phone {
      left: var(--form-left);
      top: 159rpx;
      width: 200rpx;
      height: var(--form-height);
      display: flex;
      align-items: center;
    }

    .ipt-phone-get {
      left: 309rpx;
      top: 159rpx;
      width: 185rpx;
      height: var(--form-height);
      z-index: 3;
      opacity: 0
    }

    .ipt-city-picker {
      left: var(--form-left);
      top: 288rpx;
      width: var(--form-width);
      height: var(--form-height);
      display: flex;
      align-items: center;
    }

    .ipt-date-picker {
      left: var(--form-left);
      top: 418rpx;
      width: var(--form-width);
      height: var(--form-height);
      display: flex;
      align-items: center;
    }

    .ipt-scene-picker {
      left: var(--form-left);
      top: 548rpx;
      width: var(--form-width);
      height: var(--form-height);
      display: flex;
      align-items: center;
    }

    .picker-content {
      width: var(--form-width);
      height: var(--form-height);
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .btn-submit-yuyue {
      left: -3rpx;
      top: 687rpx;
      width: 476rpx;
      height: 114rpx;
    }
  }

  .step-over {
    .info-box {
      position: absolute;
      left: 107rpx;
      top: 822rpx;
      width: 541rpx;
      display: flex;
      flex-direction: column;
      align-items: center;
      color: #fff;
      font-size: 26rpx;
      line-height: 34rpx;
      text-align: center;

      .mgt-info {
        margin-top: 30rpx;
      }
    }

    .btns-box {
      position: absolute;
      left: 176rpx;
      top: 1234rpx;
      display: flex;
      flex-direction: column;

      .btn {
        width: 400rpx;
        height: 90rpx;
        margin-bottom: 31rpx;
      }

      .btn-hexiao {
      }
    }

    .confirm_mask {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      z-index: 10;
      background-color: rgba(0, 0, 0, 0.3);

      .confirm-box {
        position: absolute;
        width: 637rpx;
        height: 417rpx;
        left: 56rpx;
        top: 541rpx;

        .confirm {
          width: 100%;
          height: 100%;
        }

        .btn-cancel {
          bottom: 0;
          height: 120rpx;
          width: 340rpx;
        }

        .btn-submit {
          bottom: 0;
          right: 0;
          left: initial;
          height: 120rpx;
          width: 340rpx;
        }
      }
    }
  }

  .step-preload {
    .bg {
      z-index: 1;
    }

    .process-bar {
      position: absolute;
      left: 141rpx;
      width: 469rpx;
      bottom: 260rpx;
      background-color: #c6a05e;
      height: 10rpx;
      border-radius: 2px;
      z-index: 10;

      .process-text {
        position: absolute;
        left: 0;
        top: -60rpx;
        width: 100%;
        color: #ffffff;
        text-align: center;
        font-size: 28rpx;
      }

      .process {
        position: absolute;
        left: 0;
        top: 0;
        width: 0;
        height: 100%;
        background-color: #ffffff;
      }

      .preload_hide {
        opacity: 0;
        position: absolute;
        left: 10000rpx;
        top: 0;
        width: 1rpx;
        height: 1rpx;
        overflow: hidden;
        z-index: 1;
      }
    }
  }
}
